<template>
  <el-dialog :title="title" :visible.sync="dialogVisible" :before-close="handleClose">
    <el-form :inline="true" :rules="rules" :model="body" ref="queryForm" size="small" label-width="80px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="地区:" v-if="title === '新增区域'" prop="parentName">
            <area-cascader :level="1" placeholder="请选择省市区" type="text" v-model="selected" :data="areaData"
              @change="changeArea"></area-cascader>
          </el-form-item>
          <el-form-item label="地区:" v-else>
            <span>{{ body.parentName }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="小区:" prop="name">
            <el-input v-model="body.name" placeholder="请输入小区名"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12" v-if="title === '修改区域'">
          <el-form-item label="编号:" prop="code">
            <el-input v-model="body.code"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="类型:" prop="type">
            <el-select v-model="body.type" placeholder="请选择">
              <el-option v-for="item in communityOption" :key="item.id" :label="item.value"
                :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="submit('queryForm')">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { pcaa } from 'area-data'
import { addAreaApi, updateAreaApi } from "@/api/expandarea/expandarealist"
import { getCommunityCode } from "@/utils/transform/transform"
export default {
  name: "AreaDialog",
  props: {
    title: {
      type: String,
      require: true
    },
    dialogVisible: {
      type: Boolean,
      require: true
    },
    areaInfo: {
      type: Object,
      require: false
    }
  },
  data() {
    return {
      areaData: {},
      selected: [],
      body: {
        parentName: "",
        name: "",
        type: "",
      },
      communityOption: [
        {
          id: "1",
          value: "城中村"
        },
        {
          id: "2",
          value: "小区"
        }
      ],
      rules: {
        parentName: [
          { required: true, message: '请选择地区', trigger: 'change' }
        ],
        name: [
          { required: true, message: '小区名不能为空', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '编码不能为空', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请选择类型', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    handleClose() {
      this.$emit('close', false);
    },
    // 点击取消
    cancel() {
      this.handleClose()
    },
    // 点击确定
    submit(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          if (this.title === '新增区域') {
            // 新增区域
            const res = await addAreaApi(this.body)
            if (res.code === 200) {
              this.$message.success('新增区域成功')
              this.handleClose()
            } else {
              this.$message.error('新增区域失败')
            }
          } else {
            // 修改区域
            const res = await updateAreaApi(getCommunityCode(this.body))
            if (res.code === 200) {
              this.$message.success('修改区域成功')
              this.handleClose()
            } else {
              this.$message.error('修改区域失败')
            }
          }
        }else {
          this.$message.warning("缺少必填项")
        }
      })

    },
    getBody() {
      if (this.title !== '修改区域')
        return
      const { id, parentName, name, type, code } = this.areaInfo
      this.body = {
        id,
        parentName,
        name,
        type,
        code
      }
    },
    changeArea() {
      if (this.selected) {
        this.body.parentName = this.selected.join("")
      }
    }
  },
  mounted() {
    this.getBody()
  },
  created() {
    this.areaData = pcaa
  },
}
</script>
<style lang="sass" scoped>

</style>